<template>
  <div class="custom-el-main">
    <el-container>
      <el-aside>
        <div class="container">
          <el-scrollbar class="el-aside-scrollbar">
            <tree-component-vue
              :treeData="trees"
              :expandAll="true"
              @OpenTreeItem="OpenTreeItem"
              :treeloadig="treeloadig"
            ></tree-component-vue>
          </el-scrollbar>
        </div>
      </el-aside>
      <el-main>
        <div class="container el-custom-container">
          <table-componets-vue
            ref="table1"
            :isShowButton="true"
            :Sizes="sizes"
            :layout="layout"
            @PageChange="PageChange"
            :currentPage="query.page"
            :pageSize="query.pageSize"
            @tableEvent="tableEvent"
            :loading="tableLoading"
            :isQuery="1 == 1"
            :tables="tables"
            :isOpertions="1 == 1"
            @hyperLinekEvent="hyperLinekEvent"
          ></table-componets-vue>
        </div>
      </el-main>
    </el-container>
    <el-drawer
      :append-to-body="true"
      :withHeader="false"
      v-model="showdrawer"
      direction="rtl"
      size="40%"
    >
      <form-componet-vue
        :pageTitle="page_Title"
        :pageType="pageType"
        :config="formConfig"
        :formModel="formModel"
        :inModel="inModel"
        :apipath="apipath"
        ref="formData"
        @FormEvent="FormEvent"
        :getway="way"
      ></form-componet-vue>
    </el-drawer>
    <div id="select_icon" class="el-dialog-content el-dialog-doc-content">
      <el-dialog
        width="460px"
        height="200px"
        v-model="dialogIocnVisable"
        :title="$t('i18n.filetype')"
      >
        <el-container>
          <el-main class="flow-icon-main">
            <el-scrollbar>
              <el-tooltip placement="bottom" effect="light">
                <template #content>{{ $t("i18n.doc_folder") }}</template>
                <el-button @click="SelectFile(0)">
                  <svg class="file_icon" aria-hidden="true">
                    <use xlink:href="#icon-wenjianjia" />
                  </svg>
                </el-button>
              </el-tooltip>
              <el-tooltip placement="bottom" effect="light">
                <template #content>{{ $t("i18n.doc_word") }}</template>
                <el-button
                  @click="SelectFile(1)"
                  :disabled="this.folderid === 0"
                >
                  <svg class="file_icon" aria-hidden="true">
                    <use xlink:href="#icon-WORD" />
                  </svg>
                </el-button>
              </el-tooltip>
              <el-tooltip placement="bottom" effect="light">
                <template #content>{{ $t("i18n.doc_excel") }}</template>
                <el-button
                  @click="SelectFile(2)"
                  :disabled="this.folderid === 0"
                >
                  <svg class="file_icon" aria-hidden="true">
                    <use xlink:href="#icon-xlsx" />
                  </svg>
                </el-button>
              </el-tooltip>
              <el-tooltip placement="bottom" effect="light">
                <template #content>{{ $t("i18n.doc_ppt") }}</template>
                <el-button
                  @click="SelectFile(3)"
                  :disabled="this.folderid === 0"
                >
                  <svg class="file_icon" aria-hidden="true">
                    <use xlink:href="#icon-pptx" />
                  </svg>
                </el-button>
              </el-tooltip>
            </el-scrollbar>
          </el-main>
        </el-container>
      </el-dialog>
    </div>
    <div class="el-dialog-content">
      <dialog-file-upload-componet-vue
        ref="fileUpload"
        @confirmEvent="loadTable"
      ></dialog-file-upload-componet-vue>
    </div>
  </div>
</template>
<script>
import reqVue from "../../utils/req.vue";
import TableComponetsVue from "../../components/TableComponets.vue";
import FormComponetVue from "../../components/FormComponet.vue";
import TreeComponentVue from "../../components/TreeComponent.vue";
import confVue from "../../utils/conf.vue";
import DialogFileUploadComponetVue from "../../components/DialogFileUploadComponet.vue";

let windowHeight = parseInt(window.innerHeight);
let windowinnerWidth = parseInt(window.innerWidth);
export default {
  components: {
    TableComponetsVue,
    FormComponetVue,
    TreeComponentVue,
    DialogFileUploadComponetVue,
  },
  data() {
    return {
      trees: [],
      windowHeight: windowHeight,
      windowinnerWidth: windowinnerWidth,
      autoHeight: {},
      outHeight: {
        height: "",
      },
      tables: {},
      sizes: confVue.$size,
      layout: confVue.$layout,
      query: {
        page: 0,
        pageSize: 15,
      },
      btns: [],
      showdrawer: false,
      page_Title: "",
      pageType: "add",
      tableLoading: false,
      formLoading: false,
      formConfig: [],
      formModel: {},
      inModel: {},
      apipath: "folder",
      treeloadig: false,
      isSearch: true,
      parentId: 0,
      paramter: {},
      way: confVue.$docApi,
      dialogIocnVisable: false,
      folderid: 0,
      fileType: 0,
    };
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  created() {
    this.InitTree();
  },
  methods: {
    InitTree(key) {
      this.treeloadig = true;
      reqVue.$Post(null, "organization/v1.0/tree").then(
        function(data) {
          if (data.status) {
            this.trees = data.body;
            this.InitTable(key == undefined ? this.trees[0] : key, this.query);
            this.treeloadig = false;
          } else {
            this.$message.error(data.message);
          }
        }.bind(this)
      );
    },
    getHeight() {
      this.outHeight.height = windowHeight - 190 + "px";
      this.autoHeight.height = windowHeight - 190 + "px";
    },
    OpenTreeItem(item) {
      this.folderid = 0;
      item.forEach((element) => {
        this.InitTable(element);
      });
    },
    ///初始化表格数据
    InitTable(tree, queryModel) {
      this.tableLoading = true;
      if (queryModel != undefined && queryModel != null) {
        this.query = queryModel;
      } else {
        this.query.page = 1;
        this.query.pageSize = 15;
      }
      this.query.paramters = [];
      this.query.paramters.push({ label: "orgid", value: tree.id });
      this.query.paramters.push({ label: "folderid", value: this.folderid });
      if (tree.nodeType === "unit") {
        this.query.paramters.push({ label: "foldertype", value: 0 });
      } else {
        this.query.paramters.push({ label: "foldertype", value: 1 });
      }
      this.paramter = tree;
      reqVue.$Post(this.query, "folder/v1.0/pages", this.way).then(
        function(data) {
          if (data.status) {
            this.tables = data.body;
            this.total = data.total;
            this.btns = data.operations;
            this.tableLoading = false;
          } else {
            this.$message.error(data.message);
            window.location.href = "/";
          }
        }.bind(this)
      );
    },
    ///表格翻页事件
    PageChange(queyModel) {
      this.InitTable(this.paramter, queyModel);
    },
    ///表格按钮事件
    tableEvent(btn) {
      this.deleteEvent(btn.data);
      this.editorEvent(btn.data);
      this.enableEvent(btn.data);
      this.onlineEvent(btn.data);
      this.downloadEvent(btn.data);
      this.uploadEvent(btn.data);
    },
    //下载文件
    downloadEvent(btn) {
      if (btn.value == "download")
        reqVue.$download(
          { autoid: btn.primaryKeyValue },
          "download",
          btn.keyFieldValue
        );
    },
    ///在线处理文件
    onlineEvent(btn) {
      if (btn.value == "ondetaildoc") {
        window.open(
          "/office/index.html?fileid=" +
            btn.primaryKeyValue +
            "&ctype=2&systemType=2"
        );
      }
      if (btn.value == "oneditdoc") {
        window.open(
          "/office/index.html?fileid=" +
            btn.primaryKeyValue +
            "&ctype=0&systemType=0"
        );
      }
    },
    ///超链接事件
    hyperLinekEvent(res) {
      if (res.data.fileType == 0) {
        this.folderid = res.data.autoId;
        this.InitTable(this.paramter);
      } else {
        if (
          res.data.fileType == 1 ||
          res.data.fileType == 2 ||
          res.data.fileType == 3
        )
          window.open(
            "/office/index.html?fileid=" +
              res.data.autoId +
              "&ctype=2&systemType=2"
          );
        else {
          window.open(res.data.fileUri);
        }
      }
    },
    ///禁用数据
    enableEvent(btn) {
      if (btn.value == "enable" || btn.value == "disable") {
        this.$confirm(
          btn.value == "enable"
            ? this.$t("i18n.confirm_enable")
            : this.$t("i18n.confirm_disable"),
          this.$t("i18n.confirm"),
          {
            type: "warning",
          }
        ).then(() => {
          let path = this.apipath;
          if (btn.keyFieldValue !== "0") {
            path = "file";
          }
          reqVue
            .$Post(null, path + "/v1.0/enable/" + btn.primaryKeyValue, this.way)
            .then(
              function(data) {
                if (data.status) {
                  let queryModel = {};
                  queryModel.currentPage = this.query.page;
                  queryModel.pageSize = this.query.pageSize;
                  this.InitTree(this.paramter);
                } else {
                  this.$message.error(data.message);
                }
              }.bind(this)
            );
        });
      }
    },
    ///删除数据
    deleteEvent(btn) {
      if (btn.value == "delete") {
        this.$confirm(this.$t("i18n.confirm_del"), this.$t("i18n.confirm"), {
          type: "warning",
        }).then(() => {
          let path = this.apipath;
          if (btn.keyFieldValue !== "0") {
            path = "file";
          }
          reqVue
            .$Post(null, path + "/v1.0/del/" + btn.primaryKeyValue, this.way)
            .then(
              function(data) {
                if (data.status) {
                  let queryModel = {};
                  queryModel.currentPage = this.query.page;
                  queryModel.pageSize = this.query.pageSize;
                  this.InitTree(this.paramter);
                } else {
                  this.$message.error(data.message);
                }
              }.bind(this)
            );
        });
      }
    },
    ///编辑数据
    editorEvent(btn) {
      this.formLoading = true;
      if (btn.value == "add") {
        this.page_Title = this.$t("table.Global_Add");
        this.pageType = btn.value;
        this.dialogIocnVisable = true;
      }
      if (btn.value == "edit") {
        this.showdrawer = true;
        this.page_Title = this.$t("table.Global_Edit");
        this.pageType = btn.value;
      }
      if (btn.value == "detaile") {
        this.showdrawer = true;
        this.page_Title = this.$t("table.Global_Detail");
        this.pageType = "view";
      }
      this.inModel = btn;
      if (btn.value !== "add") {
        let path = this.apipath;
        if (btn.keyFieldValue !== "0") {
          path = "file";
        }
        if (this.$refs["formData"] != undefined) {
          this.$refs["formData"].api = path;
          this.$refs["formData"].LoadConfig(btn, this.pageType);
        } else this.apipath = path;
      }
    },
    FormEvent(model) {
      if (model != null && model != undefined) {
        let url = "";
        let path = this.apipath;
        if (model.autoId > 0) {
          url = "edit";
        } else {
          url = "add";
          ///添加文件夹
          if (this.fileType == 0) {
            model.orgId = this.paramter.id;
            model.parentId = this.folderid;
            if (this.paramter.nodeType === "unit") {
              model.folderType = 0;
            } else {
              model.folderType = 1;
            }
          } else {
            model.folderid = this.folderid;
            model.fileType = this.fileType;
            path = "file";
          }
        }
        this.$confirm(this.$t("i18n.confirm_save"), this.$t("i18n.confirm"), {
          type: "warning",
        }).then(() => {
          reqVue.$Post(model, path + "/v1.0/" + url, this.way).then(
            function(data) {
              if (data.status) {
                this.showdrawer = false;
                let queryModel = {};
                queryModel.currentPage = 1;
                queryModel.pageSize = this.query.pageSize;
                this.InitTree(this.paramter);
              } else {
                this.$message.error(data.message);
              }
            }.bind(this)
          );
        });
      } else this.showdrawer = false;
    },
    ///选择文件
    SelectFile(type) {
      this.fileType = type;
      this.showdrawer = true;
      this.dialogIocnVisable = false;
      if (this.$refs["formData"] != undefined)
        this.$refs["formData"].LoadConfig(this.inModel, this.pageType);
      this.apipath = "folder";
    },
    uploadEvent(btn) {
      if (btn.value === "upload") {
        this.$refs.fileUpload.dialogFileUploadVisible = true;
        this.$refs.fileUpload.isdocumentcenter = true;
        this.$refs.fileUpload.InitTable(null, this.folderid);
      }
    },
    loadTable() {
      this.InitTable(this.paramter);
    },
  },
};
</script>
